'use client';

import React from 'react';
import { Flex } from 'antd';
import a from './a.png';
import { px2vw, px2vh, responsive } from '@/app/cg06/utils/responsive'; 

interface BoxProps {
	icon: string;
	label: string;
	value: number;
	unit?: string;
	unitSize?: number;
}

const Box: React.FC<BoxProps> = props => {
	const { icon, label, value, unit, unitSize } = props;

	return (
		<Flex
			align="center"
			style={{
				position: 'relative',
				width: px2vw(384),
				height: px2vh(72),
				backdropFilter: 'blur(10px)',
				padding: '0 ' + px2vw(24) + ' 0 ' + px2vw(20)
			}}
		>
			<img
				src={a.src}
				alt="a"
				style={{
					position: 'absolute',
					top: 0,
					left: 0,
					width: '100%',
					height: '100%',
					zIndex: -1
				}}
			/>
			<img src={icon} alt="icon" style={{ width: px2vw(40), height: px2vh(40) }} />
			<span
				style={{
					flex: 1,
					paddingLeft: px2vw(14),
					color: 'rgba(223,242,255,0.8)',
					fontSize: px2vw(20),
					fontWeight: 600
				}}
			>
				{label}
			</span>
			<span
				style={{
					display: 'flex',
					alignItems: 'baseline'
				}}
			>
				<span style={{ color: '#C3E7FE', fontSize: px2vw(28), fontWeight: 'bold' }}>
					{value.toLocaleString('en')}
				</span>
				{unit ? (
					<span
						style={{
							fontSize: px2vw(unitSize) || px2vw(12),
							fontWeight: 600,
							color: '#C1EAFF',
							marginLeft: px2vw(2),
							paddingLeft: px2vw(2),
						}}
					>
						{unit}
					</span>
				) : null}
			</span>
		</Flex>
	);
};

export default Box;

